<template>
  <div class="comment-item">
    <div class="comment-header">
      <el-avatar :src="comment.userPic" size="small" />
      <span class="comment-author">{{ comment.nickname }}</span>
    </div>
    <div class="comment-content">{{ comment.content }}</div>
    <div class="comment-time">{{ formatDate(comment.createTime) }}</div>

    <div class="comment-like">
      <slot name="like"></slot>
    </div>

    <!-- 回复按钮 -->
    <div class="comment-actions">
      <el-button
          type="text"
          size="small"
          @click="showReplyForm = !showReplyForm"
      >
        回复
      </el-button>
    </div>

    <!-- 回复表单 -->
    <div v-if="showReplyForm" class="reply-form">
      <el-input
          v-model="replyContent"
          type="textarea"
          :rows="2"
          placeholder="写下你的回复..."
      />
      <div class="form-actions">
        <el-button size="small" @click="showReplyForm = false">取消</el-button>
        <el-button type="primary" size="small" @click="submitReply">提交</el-button>
      </div>
    </div>

    <!-- 递归渲染子评论 -->
    <div v-if="comment.children && comment.children.length > 0" class="child-comments">
      <CommentItem
          v-for="child in comment.children"
          :key="child.commentId"
          :comment="child"
          :formatDate="formatDate"
      >
        <!-- 传递点赞插槽到子评论 -->
        <template #like>
          <slot name="like" :comment="child"></slot>
        </template>
      </CommentItem>
    </div>
  </div>
</template>
<style scoped>
.comment-item {
  margin-bottom: 15px;
  padding: 15px;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  /*transition: all 0.3s ease;*/
}

.comment-item:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.comment-author {
  margin-left: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.comment-content {
  font-size: 14px;
  color: #495057;
  line-height: 1.6;
}
.comment-like {
  margin-top: 8px;
  text-align: right;
  font-size: 13px;
}
.comment-time {
  margin-top: 8px;
  font-size: 12px;
  color: #909399;
  display: block;
}

.comment-actions {
  margin-top: 12px;
  text-align: right;
}

.reply-form {
  margin-top: 15px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.el-input__inner {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #dcdfe6;
  transition: border-color 0.3s ease;
}

.el-input__inner:hover {
  border-color: #409eff;
}

.el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.form-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.form-actions .el-button {
  padding: 6px 16px;
  border-radius: 6px;
}

@media (max-width: 480px) {
  .comment-item {
    padding: 12px;
    border-radius: 8px;
  }

  .el-avatar {
    width: 32px;
    height: 32px;
  }

  .comment-author {
    font-size: 14px;
  }

  .comment-content {
    font-size: 13px;
  }

  .comment-time {
    font-size: 11px;
  }

  .comment-actions {
    text-align: left;
  }

  .reply-form {
    padding: 10px;
    border-radius: 6px;
  }

  .form-actions {
    flex-direction: column;
    gap: 8px;
  }

  .form-actions .el-button {
    width: 100%;
  }
}
</style>
<script setup lang="ts">
import { ref } from 'vue';
import request from "@/api/request";
import { ElMessage } from "element-plus";

const props = defineProps<{
  comment: {
    commentId: number;
    userPic: string;
    nickname: string;
    content: string;
    createTime: Date;
    children?: any[];
  };
  formatDate: (date: Date) => string;
}>();

const emit = defineEmits(['reply-submitted']);
const showReplyForm = ref(false);
const replyContent = ref('');

const submitReply = async () => {
  if (!replyContent.value.trim()) return;

  try {
    await request.post('/comments/add', {
      articleId: props.comment.articleId,
      content: replyContent.value,
      parentCommentId: props.comment.commentId
    });

    ElMessage.success('回复成功');
    replyContent.value = '';
    showReplyForm.value = false;
    emit('reply-submitted'); // 通知父组件刷新评论列表
  } catch (error) {
    ElMessage.error('回复失败');
    console.error('回复失败:', error);
  }
};
</script>
